<!DOCTYPE html>
 <!-- thymeleaf追加 -->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活</title>
		<!-- 元语言 -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../../css/sm.min.css">
		<link rel="stylesheet" href=" ../../css/sm-extend.min.css">
		<!-- vue追加 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
		<!-- vue的AJAX追加 -->
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
		<!-- css的使用-->
		<style type="text/css">
			#cart{
				
			}
			#cartfont{
				color: orangered;
			}
			#pay{
				color: royalblue;
			}
			#merchant{
				color: #00CC00;
			}
			#symbol{
				border-radius: 25%;
				background-color: red;
				color: white;
				font-family: "微软雅黑";
			}
			#comname{
				border: none;
			}
		</style>
		<!-- 无限滚动的css -->
		<style type="text/css">
		  .infinite-scroll-preloader {
			margin-top:-20px;
		  }
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
		<div id="app"> <!-- vue -->
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<div id="comebackArea">
					
				</div>
				<!-- 社区入口 -->
				<h1 class="title">商品详情</h1>
			</header>



			<!-- 购物篮 -->
			<nav class="bar bar-tab">	
				<a class="tab-item external" @click="goMerchant">
					<span class="icon icon-home"></span>
					<span class="tab-label" id="merchant">店铺</span>
				</a>
				<a class="tab-item external" href="#">
					<span class="icon icon-friends"></span>
					<span class="tab-label">客服</span>
				</a>
				<a class="tab-item external"  id="cart">
					<span class="icon icon-cart"></span>
					<span class="tab-label" id="cartfont" >加入购物车</span>
				</a>
				<a class="tab-item external" @click="fastList">
					<span class="icon icon-me"></span>
					<span class="tab-label" id="pay">立即购买</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">

				<!-- 搜索栏 -->
				 <div class="searchbar row">
				     <div class="search-input col-85">
				       <input @click="goSearch" type="search" id='search' placeholder='输入关键字...'/>
				     </div>
				     <a @click="goSearch" class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
				 </div> 
				
				<!-- 商品详情 -->	
				
				<div class="content-block-title"></div>
				  <div class="card demo-card-header-pic">
				    <div valign="bottom" class="card-header color-white no-border no-padding">
				      <img class='card-cover' src="../../img/shop/liebiao_xiaomi5.jpg" alt="">
				    </div>
				    <div class="card-content">
				      <div class="card-content-inner">
						<!-- 促销辞令 -->
				        <p class="color-gray">新品秒杀</p>
						<!-- 价格 -->
				        <p><font size="2" color="orangered">¥&nbsp;</font><font size="5" color="orangered">39.8</font></p>
						<!-- 名字 -->
						<p>
							<input  type="button" id="symbol" value="优品" disabled="true" />
							<input type="text"  id="comname"  />
						</p>
						<!-- 发货地址 -->
						<p>
							发货地址:&nbsp;&nbsp;<input type="text"  id="address" style="border: none;" />
						</p>
						<!-- 销量 -->
						<p>
							<font size="" color="red">销量:</font>
							<input type="text" id="sales" style="border: none;" />
						</p>
						<!-- 活动页面 -->
						<p>
							活动
						</p>
						<!-- 参数详情页面跳转口 -->
						<p id="addArgs">
							<!-- 增加到这 -->
						</p>
				      </div>
				    </div>
				    <div class="card-footer" >
						<p>
							<font size="1" color="grey">保障</font>
							<font size="2" color="black">
								<div id="guarantee">

								</div>
							</font>
						</p>
				    </div>
				</div>
				
				<div class="card">
				    <div class="card-header">
						<div id="">
							宝贝评价<input type="button" id="commentNumber" style="border: none;background-color: white;"/>条
						</div>
					</div>
				    <div class="card-content">
				      <div class="card-content-inner">
						  <div id="">
								<input type="button"  id="comment"  style="border: none;background-color: white;"/>
						  </div>
					  </div>
				    </div>
				    <div class="card-footer">
						<div id="more">
							
						</div>
					</div>
				  </div>
				  
				
				  
			</div>
		 	 

			 
		</div><!-- /vue -->

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal">
			<div class="content-block">
				<p>这是一个侧栏</p>
				<p></p>
				<!-- Click on link with "close-panel" class will close panel -->
				<p><a href="#" class="close-panel">关闭</a></p>
			</div>
		</div>
		<!-- 导入js文件 -->
		<script src='../../js/jquery-3.2.1.min.js'></script>
		<script src='../../js/sm.js'></script>
		<script src='../../js/sm-extend.js'></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<!-- auxiliary js -->
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		<!-- VUE的使用 -->
		<script>
			//获取用户id
			//var userId = "001";
			//获取商品id
			var shopId = getUrlParam('shopId');
			//alert(shopId)
		
			var app = new Vue({
				el:"#app",
				data:{
					shopId:"",
					array:[]
				},
				created() {
					
				},
				// 方法区
				methods:{
					//跳转到搜索页面的方法
					goSearch:function(){ 
					window.location="../shop_search.html"
					},
					fastList:function(){
						if(confirm("确定要立即购买吗")){
							//ajax for axios
							var that=this;
							axios.get(serviceIP+"/shop/fastList?shopId="+shopId+""
							,{headers:{"token":token,"refreshtoken":refreshtoken}})
							.then(function(d){
								
								$.alert(d.data.msg);
								
							});
						}
					},
					//到商家展示页面方法
					goMerchant:function(){
						//ajax for axios
						var that=this;
						axios.get(serviceIP+"/shop/goMerchant?shopId="+shopId+""
						,{headers:{"token":token,"refreshtoken":refreshtoken}})
						.then(function(d){
							//$.alert(d.data.data.merchantId);
							//到商家界面去
							location.href="../merchant/showMerchant.html?merchantId="+d.data.data.merchantId+""
							
						});
					}

				},
			});
		</script>
		<!-- 初始化js -->
		<script type="text/javascript">
			//初始化方法
			$(function(){
				//首先找到商品的id
				//alert(shopId)
				//alert(shopId);
				//初始化方法
				initDetail(shopId);
					
				$("#cart").click(function(){				
					addCart(shopId);
				});
				
				//初始化评论区
				initcomment(shopId);
				
				initComeBack();
				
			});
		</script>
		<!-- 点击js -->
		<script type="text/javascript">
			function addCart(id){
				
				$.get({
				        type: 'get',
				        url: serviceIP+"/shop/initCartItem",
				        dataType: 'json',
						data:{shopId: id,
						},
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){

						$.alert(d.msg);	
						
						}
				})
			}
		</script>
		<!-- 方法js -->
		<script type="text/javascript">
			function initComeBack(){
			
			var comeback = 	"<a class='button button-link button-nav pull-left' href='showMerchant.html?shopId="+shopId+"'>"+
								"<span class='icon icon-left'></span>"+
							"</a>";
							
			$("#comebackArea").append(comeback);
				
			}
			//初始化评论方法
			function initcomment(shopId){
			
				$.get({
				        type: 'get',
				        url: serviceIP+"/shop/initcomment",
				        dataType: 'json',
						data:{shopId: shopId},
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){
						//alert(d.data.length);
						//填充条数
						$("#commentNumber").val(d.data.length);
						//填充精选评论
						$("#comment").val(d.data[1].content);
						//查看更多的跳转
						 
						var moreloc = "<a href='../comment/commentDetail.html?shopId="d.data[1].comId"'>查看更多评论</a>"
						
						$("#more").append(moreloc);
						}
					})
				}
			//初始化界面方法
			function  initDetail(id){
				
				$.get({
				        type: 'get',
				        url: serviceIP+"/shop/initDetail",
				        dataType: 'json',
						data:{shopId: id},
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){
						//初始化商品名字
						$("#comname").val(d.data.data.name);
						//初始化商品销量
						$("#sales").val(d.data.data.sales);
						//初始化发货地址
						$("#address").val(d.data.data3.address);
						
						//初始化参数详情跳转页面
						var args = "<a href='commodityArgs.html?shopId="+d.data.data.shopId+"'>详细参数</a>";
						$("#addArgs").append(args);
						//初始化保障页面跳转
						var guarantee = "<a href='../common/guarantee.html?shopId="+d.data.data.shopId+"' >假一赔四 · 坏单包退 · 急速退款 · 七天退换</a>"
						$("#guarantee").append(guarantee);
						

					}
				})
				
			}
						
		</script>
		<!-- scroll js -->
		<script type="text/javascript">
			 // 加载flag
			      var loading = false;
			      // 最多可加载的条目
			      var maxItems = 100;
			
			      // 每次加载添加多少条目
			      var itemsPerLoad = 20;
			
			      function addItems(number, lastIndex) {
			              // 生成新条目的HTML
			              var html = '';
			              for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
			                  html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
			              }
			              // 添加新条目
			              $('.infinite-scroll-bottom .list-container').append(html);
			
			          }
			          //预先加载20条
			      addItems(itemsPerLoad, 0);
			
			      // 上次加载的序号
			
			      var lastIndex = 20;
			
			      // 注册'infinite'事件处理函数
			      $(document).on('infinite', '.infinite-scroll-bottom',function() {
			
			          // 如果正在加载，则退出
			          if (loading) return;
			
			          // 设置flag
			          loading = true;
			
			          // 模拟1s的加载过程
			          setTimeout(function() {
			              // 重置加载flag
			              loading = false;
			
			              if (lastIndex >= maxItems) {
			                  // 加载完毕，则注销无限加载事件，以防不必要的加载
			                  $.detachInfiniteScroll($('.infinite-scroll'));
			                  // 删除加载提示符
			                  $('.infinite-scroll-preloader').remove();
			                  return;
			              }
			
			              // 添加新条目
			              addItems(itemsPerLoad, lastIndex);
			              // 更新最后加载的序号
			              lastIndex = $('.list-container li').length;
			              //容器发生改变,如果是js滚动，需要刷新滚动
			              $.refreshScroller();
			          }, 1000);
			      });
		</script>
	</body>
</html>
